<template>
  <div class="login">
    <div style="width: 70%;">
      <el-form ref="loginForm" :model="form" :rules="rules" class="login-form" @keyup.enter.native="handleLogin">
        <h3 class="title">{{title}}</h3>
        <el-form-item prop="username">
          <el-input v-model="form.username" type="text" auto-complete="off" placeholder="账号" size="default">
            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="loginPwd">
          <el-input v-model="form.loginPwd" type="password" auto-complete="off" placeholder="密码" size="default">
            <svg-icon slot="prefix" icon-class="lock" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="codeObject" v-if="form.username">
          <captcha ref="captcha" :username="form.username" @success="submitLogin"/>
        </el-form-item>
        <el-checkbox v-model="form.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
        <el-form-item style="width:100%;">
          <el-button :loading="loading" size="default" type="primary" style="width:100%;" @click="handleLogin">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--  底部  -->
    <div class="el-login-footer">
      <span>Copyright © 2020-{{nowYear}} lam.com All Rights Reserved.</span>
    </div>
  </div>
</template>

<script>
  import {getUsername, setUsername} from "@/utils/auth";
  import vueConfig from '/vue.config'
  import captcha from "@/views/common/captcha"

  export default {
    name: "Login",
    components:{
      captcha
    },
    data() {
      return {
        title: vueConfig.configureWebpack.name+'-登录',
        nowYear: this.$formatDate(new Date(), 'yyyy'),
        form: {
          username: "",
          loginPwd: "",
          rememberMe: false,
          codeObject: "",
        },
        rules: {
          username: [{ required: true, trigger: "blur", message: "用户名不能为空" }],
          loginPwd: [{ required: true, trigger: "blur", message: "密码不能为空" }],
          codeObject:[{ validator: this.validateCaptcha, trigger: 'blur' }]
        },
        loading: false,
        redirect: undefined,
      };
    },
    watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    created() {

    },
    mounted(){
      this.form.username = getUsername();
      // this.$refs.captcha.init();
      //this.$refs.captcha.refreshCode();
    },
    methods: {
      validateCaptcha(rule, value, callback){
        let msg = this.$refs.captcha.valid()
        if (msg) {
          callback(new Error(msg));
        } else {
          callback();
        }
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.submitLogin()
          }
        });
      },
      submitLogin(params){
        this.loading = true;
        setUsername(this.form.username)
        let data = Object.assign({}, this.form);
        data.codeObject = params?params:this.$refs.captcha.getCaptchaInfo();
        data.loginPwd = this.md5(data.loginPwd);
        data.category = data.codeObject?data.codeObject.category:null;
        this.$store.dispatch("Login", data).then((res) => {
          this.$router.push({path: this.redirect || "/" });
        }).catch((res) => {
          this.loading = false;
          this.$refs.captcha.refreshCode();
        });
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss">
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url("../../assets/image/login-background.jpg");
    background-size: cover;
  }

  .title {
    font-size: 38px;
    margin: 0px auto 30px auto;
    text-align: center;
    color: #152934;
  }

  .login-form {
    float: right;
    border-radius: 6px;
    background: #e7ededc4;
    width: 400px;
    padding: 25px 25px 5px 25px;

    .el-input {
      height: 38px;

      input {
        height: 38px;
      }
    }

    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 2px;
    }
  }

  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }

  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }

</style>
